<template>
    <div class="content">
        <div class="search">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M9 14.25L3.75 9M3.75 9L9 3.75M3.75 9H14.25" stroke="#505662" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <a-input placeholder="Search for apps & games" />
        </div>
        <div class="searchItem" v-for="item in historyOptions">
            <svg class="clock" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"
                fill="none">
                <g clip-path="url(#clip0_16016_100)">
                    <path
                        d="M7.00002 3.5V7L9.33335 8.16666M12.8334 7C12.8334 10.2217 10.2217 12.8333 7.00002 12.8333C3.77836 12.8333 1.16669 10.2217 1.16669 7C1.16669 3.77834 3.77836 1.16666 7.00002 1.16666C10.2217 1.16666 12.8334 3.77834 12.8334 7Z"
                        stroke="#9DA2AD" stroke-linecap="round" stroke-linejoin="round" />
                </g>
                <defs>
                    <clipPath id="clip0_16016_100">
                        <rect width="14" height="14" fill="white" />
                    </clipPath>
                </defs>
            </svg>
            <span class="searchText">{{ item.value }}</span>
            <svg @click.stop="removeHistory(item)" style="margin-left:auto " xmlns="http://www.w3.org/2000/svg"
                width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="#9DA2AD" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </div>
    </div>
</template>
<script setup>
const historyOptions = ref([
  {
    value: "Home"
  },
  {
    value: "Games"
  }
]);
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: calc(100vh - 409px);
    // background-color: #ffffff;
    overflow-y: auto;
    background: #FFF;
    .search {
        display: flex;
        max-width: var(--md, 768px);
        padding: 12px 16px;
        align-items: center;
        align-self: stretch;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    }

    :deep(.ant-input) {
        border: none;
    }

    .searchItem {
        padding:0 16px;
        display: flex;
        min-height: 40px;
        justify-content: center;
        align-items: center;
        gap: 12px;
        align-self: stretch;
    }

    .searchItem:hover .searchText {
        color: #775CE1;
    }

    .searchItem:hover .clock path {
        stroke: #775CE1 !important;
    }

    .searchText {
        color: #6E727E;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        /* 142.857% */
    }
}
</style>